<template>
	<view class="page draw">
		<view class="draw-list">
			<view class="draw-item" @tap="toDrawDetails(item.id)" v-for="(item,index) in list" :key="item.id">
				<image :src="item.prizeUrl" mode="widthFix" class="pct100"></image>
				<view class="padding30">
					<view class="mc-f14">奖品：{{item.prizeName}}</view>
					<view class="mc-f14 margin-top20 margin-bottom20">数量：<text style="color: #fef14d;">{{item.prizeAmount}} 份</text> </view>
					<view class="mc-flex-vcenter mc-f12" style="opacity: 0.8;" v-if="!item.isLottery">
						<image src="../../../static/images/ui_weikaijiang.png" mode="widthFix" style="width: 25upx;height: 25upx;"></image>
						<text class="margin-left16" style="color: #1ac97c;">待开奖</text>
						<text class="padding16" style="color: #1ac97c;">|</text>
						<text>{{item.lotteryTime}} 自动开奖</text>
					</view>
					<view class="mc-flex-vcenter mc-f12" style="opacity: 0.8;" v-else>
						<image src="../../../static/images/ui_yikaijiang.png" mode="widthFix" style="width: 25upx;height: 25upx;"></image>
						<text class="margin-left16" style="color: #f19275;">已开奖</text>
						<text class="padding16" style="color: #f19275;">|</text>
						<text>已于 {{item.lotteryTime}} 成功开奖</text>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-bottom:30upx">
		  <banner-ad></banner-ad>
		</view>
		<uni-load-more :status="status" :contentText="contentText" v-if="total" @tap="loadList"></uni-load-more>
		<view class="list-no-data" v-else>
			<image src="../../../static/images/ui_meiyoujiangping.png" mode="widthFix" />
			<text @tap="toDraw">暂无抽奖，立即去参与~</text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	let gData = {};
	let _self;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [],
				total: 0,
				status: "more",
				contentText: {
					contentdown: "点击加载",
					contentrefresh: "正在加载...",
					contentnomore: ""
				}
			}
		},
		onLoad(options) {
			_self = this;
			this.initList()
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList();
			uni.stopPullDownRefresh()
		},
		// 上拉加载
		onReachBottom() {
			this.loadList();
		},
		methods: {
			// 初始化列表
			initList() {
				gData.page = 0;
				this.list = [];
				this.status = "more";
				this.loadList();
			},
			// 加载列表
			async loadList() {
				if (this.status == "more") {
					const page = gData.page + 1;
					this.status = "loading";
					const pageSize = 10;
					// uni.showNavigationBarLoading();
					try {
						let data = await this.$api.draw.getMyPartakeDrawList({
							page: page, // 页数
							rows: pageSize //
						});
						console.log(data)
						
						const addList = data.list || [];
						addList.map((item) => {
							if (item.lotteryTime) {
								const arr = this.$util.formatTimestamp(item.lotteryTime)
								item.lotteryTime = arr[1] + '月' + arr[2] + '日 ' + arr[3] + ':' + arr[4];
							}
						})
						this.list = this.list.concat(addList)
						gData.page = page;
						this.total = data.total;
						const noMore = (page * pageSize) >= data.total;
						this.status = noMore ? "noMore" : "more";
						// uni.hideNavigationBarLoading()
					} catch (e) {
						this.status = "more";
						console.log('request fail', e);
					}
				};
			},
			toDrawDetails(id){
				uni.navigateTo({
					url:'/pages/draw/details/details?prizeId='+id
				})
			},
			toDraw(){
				uni.switchTab({
					url:'/pages/tabBar/draw/index'
				})
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				// _self.$api.setFormId(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.draw {
		background-color: #581ae1;
		color: white;
		font-size: 24rpx;

		.draw-list {
			padding: 36rpx;
		}
		
		.draw-item{
			background-color: #2f2c83;
			border-radius: 20upx;
			margin-bottom: 30upx;
		}
	}
	
	.list-no-data{
		image{
			display: block;
			width: 260rpx;
			margin: 160rpx auto 60rpx;
		}
		text{
			display: block;
			width: 100%;
			color: white;
			text-align: center;
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
</style>
